<template>
  <view class="container">
    <u-navbar
      :title="navtitle"
      leftIconColor="#ffffff"
      :autoBack="true"
      bgColor="#c30d23"
      :titleStyle="titleStyle"
      safeAreaInsetTop
      placeholder
    ></u-navbar>
    <view class="echarts-box" v-if="dataList.length > 0">
      <view class="echartsHeader">
        <view class="echartsHeaderLeft ccc">
          <view class="ehh" :class="Number(dataList[0].last) > presettle ? 'red' : 'green'">
            {{ formatNumber(dataList[0].last) }}
          </view>
          <view class="ehf">
            <text :class="Number(dataList[0].last) > presettle ? 'red' : 'green'">
              {{ formatNumber(Number(dataList[0].last) - dataList[0].presettle) }}
            </text>
            <text :class="Number(dataList[0].last) > presettle ? 'red' : 'green'">
              {{
                formatNumber(
                  ((Number(dataList[0].last) - dataList[0].presettle) / dataList[0].presettle) * 100
                ) + '%'
              }}
            </text>
          </view>
        </view>
        <view class="echartsHeaderRight">
          <view class="once c-between-center">
            <text>开盘</text>
            <text :class="dataList[0].opened > presettle ? 'red' : 'green'">
              {{ formatNumber(dataList[0].opened) }}
            </text>
          </view>
          <view class="once c-between-center">
            <text>最高</text>
            <text :class="dataList[0].highest > presettle ? 'red' : 'green'">
              {{ formatNumber(dataList[0].highest) }}
            </text>
          </view>
          <view class="once c-between-center">
            <text>涨停</text>
            <text :class="dataList[0].highest > presettle ? 'red' : 'green'">
              {{ formatNumber(dataList[0].zt) || '- - ' }}
            </text>
          </view>
          <view class="once c-between-center">
            <text>昨结</text>
            <text>{{ formatNumber(dataList[0].presettle) }}</text>
          </view>
          <view class="once c-between-center">
            <text>最低</text>
            <text :class="dataList[0].lowest > presettle ? 'red' : 'green'">
              {{ formatNumber(dataList[0].lowest) }}
            </text>
          </view>
          <view class="once c-between-center">
            <text>跌停</text>
            <text :class="dataList[0].lowest > presettle ? 'red' : 'green'">
              {{ formatNumber(dataList[0].dt) || '- -' }}
            </text>
          </view>
        </view>
      </view>
      <view class="hengshow" :style="{ paddingBottom: up ? '' : '20rpx' }">
        <view class="lineBox">
          <view class="leftLine"></view>
          <view class="center fcc">
            <u-icon v-if="!up" name="arrow-down" @click="up = !up"></u-icon>
            <u-icon v-if="up" name="arrow-up" @click="up = !up"></u-icon>
          </view>
          <view class="rightLine"></view>
        </view>
      </view>
      <view class="showView" v-show="up">
        <view class="svLeft">
          <view class="">
            <text>买量</text>
            <text>{{ dataList[0].bidvolume }}</text>
          </view>
          <view class="">
            <text>买价</text>
            <text :class="dataList[0].bid > presettle ? 'red' : 'green'">
              {{ formatNumber(dataList[0].bid) }}
            </text>
          </view>
          <view class="">
            <text>均价</text>
            <text :class="dataList[0].averageprice > presettle ? 'red' : 'green'">
              {{ formatNumber(dataList[0].averageprice) }}
            </text>
          </view>
          <view class="">
            <text>成交量</text>
            <text :class="dataList[0].bid > presettle ? 'red' : 'green'">
              {{ dataList[0].totalvolume }}
            </text>
          </view>
        </view>
        <view class="svRight">
          <view class="">
            <text>卖量</text>
            <text>{{ dataList[0].askvolume }}</text>
          </view>
          <view class="">
            <text>卖价</text>
            <text :class="dataList[0].ask > presettle ? 'red' : 'green'">
              {{ formatNumber(dataList[0].ask) }}
            </text>
          </view>
          <view class="">
            <text>振幅</text>
            <text>{{ zhenfu }}</text>
          </view>
          <view class="">
            <text>成交额</text>
            <text>{{ dataList[0].totalturnover }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="cenecharts">
      <view class="tabBox">
        <u-tabs
          :list="list1"
          :current="current"
          lineColor="#ff2b2b"
          :activeStyle="{ fontWeight: '700', color: '#323233', fontSize: '28rpx' }"
          :inactiveStyle="{ color: '#646566', fontSize: '28rpx' }"
          lineWidth="50"
          @change="tabschange"
        ></u-tabs>
        <zb-popover
          placement="bottom"
          :options="actions"
          ref="Popover1"
          @handleClick="handleClick"
          @select="selectact"
          class="item-popover"
        >
          <view
            :style="
              current === 1
                ? { fontWeight: '700', color: '#323233', fontSize: '28rpx' }
                : { color: '#646566', fontSize: '28rpx' }
            "
          >
            {{ newfen.text }}
          </view>
        </zb-popover>
      </view>
      <view class="timeshare">
        <!--  #ifdef  H5 -->
        <div class="kline" id="kline" ref="kline"></div>
        <!--  #endif -->
        <!--  #ifndef  H5 -->
        <canvas
          id="kline2"
          canvas-id="kline2"
          class="kline2"
          v-bind:style="{ width: ChartWidth + 'px', height: ChartHeight + 'px' }"
          @touchstart="KLineTouchStart"
          @touchmove="KLineTouchMove"
          @touchend="KLineTouchEnd"
        ></canvas>
        <!--  #endif -->
      </view>
      <view class="other" v-show="current !== 0">
        <view class="btntab">
          <view
            :class="['item', btntabactive === index ? 'bactive' : '']"
            v-for="(item, index) in btntab"
            :key="index"
            @click="btntabchan(index)"
          >
            {{ item.name }}
          </view>
        </view>
      </view>
    </view>
    <view class="bottlist">
      <u-row customStyle="margin-bottom: 10px">
        <u-col span="6">
          <view>
            <u-cell size="font-size=26rpx" title="卖挂牌" value="更多" @click="gopath(0)">
              <view slot="title" style="font-size: 28rpx">卖挂牌</view>
              <view slot="value" style="font-size: 24rpx; color: #999; display: flex">
                <text>更多</text>
                <u-icon name="arrow-right" color="#999" size="12"></u-icon>
              </view>
            </u-cell>
            <view class="buylisting">
              <view class="buy" v-for="(item, index) in sellist" :key="index">
                <view>{{ item.name }}</view>
                <view>{{ item.price }}</view>
                <view>{{ item.number }}</view>
              </view>
            </view>
          </view>
        </u-col>
        <u-col span="6">
          <view>
            <u-cell size="large" title="买挂牌" value="更多" @click="gopath(1)">
              <view slot="title" style="font-size: 28rpx">买挂牌</view>
              <view slot="value" style="font-size: 24rpx; color: #999; display: flex">
                <text>更多</text>
                <u-icon name="arrow-right" color="#999" size="12"></u-icon>
              </view>
            </u-cell>
            <view class="buylisting">
              <view class="buy" v-for="(item, index) in buylist" :key="index">
                <view>{{ item.name }}</view>
                <view>{{ item.price }}</view>
                <view>{{ item.number }}</view>
              </view>
            </view>
          </view>
        </u-col>
      </u-row>
    </view>
    <view class="bottlable">
      <zb-table
        :show-header="true"
        :columns="column"
        :stripe="false"
        :fit="false"
        :cell-header-style="cellheaderStyle"
		:cell-style="cellStyle"
        sum-text="合计"
        :border="false"
        :data="data"
      ></zb-table>
    </view>
   <view class="bottom">
     <u-button color="#D82D42" @click="goPage('/pages/order/buys', 0)">买入</u-button>
     <u-button color="#1E78B9" @click="goPage('/pages/order/buys', 1)">卖出</u-button>
   </view>
  </view>
</template>

<script>
import { orderUrl, goodsPrice, queryQuoteDay } from '@/api/user.js';
import { getNewOrderList } from '@/api/order.js';
import color from '../../uni_modules/uview-ui/libs/config/color';
import echarts from './echarts';
export default {
  data() {
    return {
      up: false,
      titleStyle: {
        color: '#ffffff',
        fontSize: '36rpx',
        fontWeight: '400'
      },
      navtitle: '',
      dataList: [],
      presettle: '',
      zhenfu: '',
      activeStyle: {
        fontWeight: '700',
        color: '#333333'
      },
      titleStyle: {
        color: '#ffffff',
        fontSize: '36rpx',
        fontWeight: '400'
      },
      list1: [
        {
          name: '分时'
        },
        {
          name: ' '
        },
        {
          name: '日线'
        },
        {
          name: '周线'
        },
        {
          name: '月线'
        }
      ],
      newfen: {
        text: '分钟',
        num: 4
      },
      actions: [
        { text: '1分钟', num: 4 },
        { text: '5分钟', num: 5 },
        { text: '30分钟', num: 7 },
        { text: '60分钟', num: 8 },
        { text: '4小时', num: 12 }
      ],
      current: 0,
      btntabactive: 0,
      btntab: [
        { name: 'MACD' },
        { name: 'VOL' },
        { name: 'KDJ' },
        { name: 'RSI' },
        { name: 'CCI' }
      ],
      sellist: [],
      buylist: [],
      column: [
        { name: 'time', label: '时间', width: 180 },
        { name: 'PE', label: '最新价', color: 'green' },
        { name: 'Vol', label: '现量', align: 'right' }
        // { name: 'goodscode', label: '商品名称/代码',fixed:false,width:120,emptyString:'--' },
        //       { name: 'bid', label: '买价',sorter:false,align:'right', },
        //       { name: 'bidvolume', label: '买量',color:'green'},
        //       { name: 'ask', label: '卖价' },
      ],
      data: [], // 最下方表格数据
    };
  },
  mixins: [echarts],
  onLoad(e) {
    this.navtitle = e.name;
    this.getorderUrl();
    this.getOrderList();
    this.queryQuoteDay();
  },
  methods: {
    getorderUrl() {
      orderUrl().then(res => {
        this.dataList = res.data;
        this.Symbol = res.data[0].goodscode;
        this.presettle = this.dataList[0].presettle;
        this.zhenfu =
          this.formatNumber(
            ((Number(this.dataList[0].last) - Number(this.dataList[0].presettle)) /
              Number(this.dataList[0].presettle)) *
              100
          ) + '%';
      });
    },
    getOrderList() {
      getNewOrderList({
		  goodsCode:this.navtitle.split('/')[0],
		  count:20
	  }).then(res => {
		  // console.log(2222,res);
		  if(res.data) {
			  this.data = res.data.map(item => {
				  item.time = item.TS.split('+')[0]?.slice(-8)
				return {
				  ...item,
				  lasttime: item.lasttime?.split(' ')[1]
				};
			  });
			  
		  }
	  })
    },

    queryQuoteDay() {
      queryQuoteDay().then(res => {
		  // console.log(22222,res);
		  // 买卖挂牌
		    if (res.data && res.data.length > 0) {
		      const item = res.data[0];
		      this.sellist = [
		        { name: '卖一', price: item.ask, number: item.askvolume },
		        { name: '卖二', price: item.ask2, number: item.askvolume2 },
		        { name: '卖三', price: item.ask3, number: item.askvolume3 }
		      ];
		      this.buylist = [
		        { name: '买一', price: item.bid, number: item.bidvolume },
		        { name: '买二', price: item.bid2, number: item.bidvolume2 },
		        { name: '买三', price: item.bid3, number: item.bidvolume3 }
		      ];
		    }
			
      });
    },
    formatNumber(number) {
      if (number) {
        // 使用 toFixed 保留两位小数
        return parseFloat(number).toFixed(2);
      } else {
        return false;
      }
    },
    gopath(num) {
      uni.navigateTo({
        url: '/pages/order/list?num=' + num + '&navtitle=' + this.navtitle
      });
    },
    tabschange(e) {
      this.current = e.index;
      this.init();
    },
    selectact(item) {
      this.newfen = item;
      this.current = 1;
      this.init();
    },
    btntabchan(idx) {
      this.btntabactive = idx;
      this.ChangeKLineIndex(1, this.btntab[this.btntabactive].name);
    },
    handleClick(ble) {
      console.log(ble);
      console.log('handleClick');
    },
    cellheaderStyle() {
      return {
        color: '#999999'
      };
    },
    cellStyle({row, column, rowIndex, columnIndex}) {
		if(column.name === 'Vol'){
			return {
				textAlign:"right",
			}
		}
    },
    goPage(url, type) {
      uni.navigateTo({
        url: `${url}?name=${this.navtitle}&type=${type}`
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 80rpx;
}
.lineBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .leftLine,
  .rightLine {
    width: 45%;
    height: 1rpx;
    background: #eee;
  }
}

.red {
  color: #f33;
}

.green {
  color: #0baf1f;
}

.hengshow {
  padding: 0 20rpx;
  box-sizing: border-box;
  background: #fff;
}

.showView {
  width: 100%;
  height: 320rpx;
  // background: #ff2b2b;
  display: flex;
  background: #fff;

  .svLeft,
  .svRight {
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    padding: 10rpx 20rpx;

    view {
      width: 100%;
      height: 25%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      text:first-child {
        color: #999999;
      }
    }
  }
}

.echarts-box {
	font-size: 26rpx;
}
.echartsHeader {
  width: 100%;
  height: 230rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;

  .echartsHeaderLeft {
    width: 35%;
    height: 100%;

    // background: green;
    .ehh {
      font-size: 56rpx;
    }

    .ehf {
      font-size: 30rpx;
      width: 100%;
      box-sizing: border-box;
      padding: 0 20rpx;
      margin-top: 20rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }

  .echartsHeaderRight {
    width: 65%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;

    .once {
      width: 30%;
      text:first-child {
        color: #999999;
      }

      text:last-child {
		  margin-top: 5rpx;
        font-size: 28rpx;
      }
    }

    // background: red;
  }
}

.cenecharts {
  margin-top: 20rpx;
  background-color: white;
  position: relative;

  .tabBox {
    width: 100%;
    height: 80rpx;
    background: #fff;
	margin-bottom: 20rpx;
	border-bottom: 1rpx solid #eee;
    /deep/.u-tabs__wrapper__nav__item {
      width: 14.5%;
    }

    .item-popover {
      position: relative;
      top: -86rpx;
      display: inline-block;
      left: 20.5%;
      //			z-index: 999;
      width: 14.5%;
      padding: 0 22rpx;
      height: 86rpx;
      line-height: 86rpx;
      text-align: center;
    }
  }
  .timeshare {
    // height: calc(100% - 41px);
	padding-bottom: 10rpx;
    .kline {
      width: 100%;
      height: 100%;
    background-color: #fff;
    }
  }

  .btntab {
    padding: 10rpx 10rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background: #fff;
    position: absolute;
    bottom: 0;
    width: 100%;

    .item {
      font-size: 25rpx;
      width: 100%;
      text-align: center;
      height: 60rpx;
      line-height: 60rpx;
      color: #7a8a94;
      background-color: transparent;
    }

    .bactive {
      font-weight: 700;
      color: #222;
      background-color: #f0f0f1;
    }
  }
}

.bottlist {
  margin-top: 20rpx;
  background-color: #fff;

  .buy {
    display: flex;
    justify-content: space-around;
    color: #333;
    line-height: 63rpx;
    height: 63rpx;
    font-size: 25rpx;

    :nth-child(2) {
      color: #f33;
    }
  }
}

.bottlable {
  margin-top: 20rpx;
}
.bottom {
  position: fixed;
  display: flex;
  bottom: 0;
  left: 0;
  right: 0;
	/deep/.u-button{
		border-radius: 0;
	}
}
</style>
